import './css/index.css';

function component() {
    var perspective = document.createElement("div");
    perspective.id = "perspective";
    var wrap = document.createElement("div");
    wrap.id = "wrap";
    var pics = ['00001.jpg', '00002.jpg', '00003.jpg', '00004.jpg', '00005.jpg', '00006.jpg', '00007.jpg', '00008.jpg',
        '00009.jpg', '00010.jpg', '00011.jpg', '00012.jpg'
    ];
    pics.forEach(function (value) {
        var img = document.createElement("img");
        img.src = "./static/pics/" + value;
        wrap.appendChild(img);
    });
    perspective.appendChild(wrap);
    return perspective;
}

document.getElementById('content').appendChild(component());

window.onload = function () {
    var oWrap = document.getElementById('wrap');
    var oImg = oWrap.getElementsByTagName('img');
    var oImgLength = oImg.length;
    var Deg = 360 / oImgLength;
    var nowX, nowY, lastX, lastY, minusX = 0,
        minusY = 0;
    var roY = 0,
        roX = -10;
    var timer;

    for (var i = 0; i < oImgLength; i++) {
        oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
        oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';

    }

    mTop();

    window.onresize = mTop;

    function mTop() {
        var wH = document.documentElement.clientHeight;
        oWrap.style.marginTop = wH / 2 - 180 + 'px';
    }

    document.onmousedown = dragStart;
    document.ontouchstart = dragStart;

    /**
     * 拖拽开始
     * @param ev
     */
    function dragStart(ev) {
        ev = ev || window.event;

        //鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
        if (ev instanceof TouchEvent) {
            lastX = ev.touches[0].clientX;
            lastY = ev.touches[0].clientY;
        } else {
            lastX = ev.clientX;
            lastY = ev.clientY;
        }

        this.onmousemove = dragMove;
        this.onmouseup = dragEnd;
        this.ontouchmove = dragMove;
        this.ontouchend = dragEnd;

        return false;
    }

    /**
     * 拖拽
     * @param ev
     */
    function dragMove(ev) {
        ev = ev || window.event;

        clearInterval(timer);

        if (ev instanceof TouchEvent) {
            nowX = ev.touches[0].clientX; // clientX 鼠标距离页面左边的距离
            nowY = ev.touches[0].clientY; // clientY ………………………………顶部………………
        } else {
            nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
            nowY = ev.clientY; // clientY ………………………………顶部………………
        }

        //当前坐标和前一点坐标差值
        minusX = nowX - lastX;
        minusY = nowY - lastY;

        //更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
        roY += minusX * 0.2; // roY = roY + minusX*0.2;
        roX -= minusY * 0.1;

        oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

        /*
        //生成div，让div跟着鼠标动
        var oDiv = document.createElement('div');
        oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
        this.body.appendChild(oDiv);
        */

        //前一点的坐标
        lastX = nowX;
        lastY = nowY;

    }

    /**
     * 拖拽完成
     */
    function dragEnd(ev) {
        this.onmousemove = null;
        this.ontouchmove = null;
        timer = setInterval(function () {
            minusX *= 0.95;
            minusY *= 0.95;
            roY += minusX * 0.2; // roY = roY + minusX*0.2;
            roX -= minusY * 0.1;
            oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

            if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
                clearInterval(timer);
            }
            console.log(minusX);
        }, 13);

    }

};